<template>
	<view>
		<view class="p30 contens">
			<view class="topsNav bgw p30">
				<view class="titleTypes">
					配送方式：{{order.shippingMethod?"到店自取":"送货到家"}}
				</view>
				<view  @tap="openMap()"  v-if="!order.shippingMethod" class="Texts1 ">
					<p class="p1">
						<image src="../../static/image/shouhuodihzi@2x.png" ></image>
						<span>
							{{order.address}}
						</span>
						<image class="addressIConGo" src="../../static/image/daohang@2x.png" ></image>
					</p>
					<p class="p2">
						{{order.consignee}}
						&nbsp;
						{{order.mobile}}
					</p>
				</view>
				<view v-else class="Texts1  upDoor">
					<p class="p1">
						<!-- {{shippingAddress.address}} -->
						<view @tap="openMap()" class="addIcons">
							<image src="../../static/image/daohang@2x.png" mode=""></image>
							<br />
							查看路线
							<!-- {{distance?"距您"+distance:"设置默认地址后显示距离"}} -->
						</view>
					</p>
					<view class="times">
						<view>
							<p>
								自取时间
							</p>
							<p>
								{{order.arrivalTime?order.arrivalTime.slice(5):"请联系摊主"}}
								<!-- <image src="../../static/image/go.png" mode=""></image> -->
							</p>
						</view>
						<view>
							<p>
								预留手机号
							</p>
							<p>
								{{order.reservedMobile}} <!-- <image src="../../static/image/bianji@2x.png" mode=""></image> -->
							</p>
						</view>
					</view>
				</view>
				<view class="topBtn">
					<u-button :ripple="true" @click="jump()">
						<image src="../../static/image/xinxi@2x.png" mode=""></image>
						联系{{isSeller?'买':'卖'}}家
					</u-button>
					<u-button :ripple="true" @click="call()">
						<image src="../../static/image/dianhua@2x.png" mode=""></image>
						拨打电话
					</u-button>
				</view> 
			</view>
			<createdGoods :order="order" :orderItems="order.orderItems" :productCreator="order.productCreator"></createdGoods>

			<view class="OrderText bgw">
				<view class="title p30">
					订单信息
				</view>
				<view class="txts">
					<view>订单号 </view>
					<view>
						{{order.sn}}
					</view>
				</view>
				<view class="txts">
					<view>支付方式 </view>
					<view>
						线下付款
					</view>
				</view>
				<view class="txts">
					<view>下单时间 </view>
					<view>
						{{order.createdDate}}
					</view>
				</view>
				<view class="txts" v-if="!order.shippingMethod">
					<view>发货时间 </view>
					<view>
						{{!!order.deliveryTime?order.deliveryTime:"未发货"}}
					</view>
				</view>
				<view class="txts" v-else>
					<view>自取时间 </view>
					<view>
						{{!!order.arrivalTime?order.arrivalTime+":00":"请联系摊主"}}
					</view>
				</view>
				<view class="txts">
					<view>收货时间 </view>
					<view>
						{{order.status == 'COMPLETED'?order.lastModifiedDate:"未收货"}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="order.status != 'COMPLETED'  &&  order.status != 'CANCELLED' ">
			<view class="btns bgw" v-if="!isSeller">
				<u-button :ripple="true" shape="circle" class="remves" v-if="order.status == 'RESERVED' || order.status == 'ORDER_TAKING' || order.status == 'SELF_PICK_UP'"
				 @click="updateStatus('CANCELLED')">取消预定</u-button>
				<u-button :ripple="true" shape="circle" :plain="true" type="success" class="remves" v-if="order.satus == 'DELIVERY' || order.status == 'SELF_PICK_UP'"
				 @click="updateStatus('COMPLETED')">确认收货</u-button>
			</view>
			<view class="btns bgw" v-else>
				<u-button :ripple="true" shape="circle" class="remves" type="success" :plain="true" v-if="order.status == 'RESERVED'"
				 @click="updateStatus('ORDER_TAKING')">确认接单</u-button>
				<u-button :ripple="true" shape="circle" class="remves" type="success" :plain="true" v-if="order.status == 'ORDER_TAKING'"
				 @click="updateStatus('DELIVERY')">确认配送</u-button>
				<u-button :ripple="true" shape="circle" class="remves" type="success" :plain="true" v-if="order.status == 'DELIVERY'"
				 @click="updateStatus('COMPLETED')">确认送达</u-button>
				<u-button :ripple="true" shape="circle" type="success" class="remves" :plain="true" v-if="order.status == 'SELF_PICK_UP'"
				 @click="updateStatus('COMPLETED')">自取完成</u-button>
				<!-- <u-button :ripple="true" shape="circle" class="remves"
					v-if="order.status == 'RESERVED' || order.status == 'ORDER_TAKING' || order.status == 'SELF_PICK_UP'" 
					@click="updateStatus(order.id,'CANCELLED')"
				>取消交易</u-button>-->
			</view>
		</view>
		<serveGoods :list="order.orderItems" ref="serveGoods"></serveGoods>
	</view>
</template>

<script>
	import {mapServe} from '../../tool/index.js'
	import createdGoods from '@/components/OrderGoods/OrderGoods.vue'
	import serveGoods from './serveGoods.vue'
	export default {
		components: {
			createdGoods,serveGoods
		},
		onLoad(e) { 
			this.id = e.id;
			this.isSeller = e.isSeller;
			this.getDetail();
			console.log(this.$store.state.latitude);
			console.log(this.$store.state.longitude);

		},
		data() {
			return {
				id: 0,
				order: {},
				distance: "",
				shippingAddress: {},
				isSeller: false,
				mobile: "", 
				navActs: 0,

			};
		},
		methods: { 
			openMap() {
				 if(this.isSeller){
					 let order = this.order
					 mapServe(order.latitude,order.longitude,order.address)
				 }else{
					 this.$refs['serveGoods'].show() 
				 }
			},
			getDetail() {
				var params = {
					id: this.id
				};
				this.$common.ajax.postAjax({
					url: this.$common.url.api.orderDetail,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							this.order = result.data;
							this.distance = result.data.distance;
							this.shippingAddress = result.data.shippingAddress; 
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})
			},
			updateStatus(status) {
				var params = {
					id: this.id,
					status: status
				}
				var url = this.$common.url.api.memberUpdateStatus;
				if (this.isSeller) {
					url = this.$common.url.api.businessUpdateStatus;
				}
				this.$common.ajax.postAjax({
					url: url,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							this.$common.msg(result.msg);
							this.getDetail();
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~")
					}
				})
			},
			call() { 
				 if(this.isSeller){
					 if (this.order.mobile) {
					 	var mobile = this.order.mobile;
					 	uni.makePhoneCall({
					 		phoneNumber: mobile
					 	});
					 } else {
					 	this.$common.msg("请刷新页面重试");
					 } 
				 }else{
					this.$refs['serveGoods'].show()
				 } 
			},
			jump() {
				var url  
				if(this.isSeller){ 
					if (this.order.mobile) {  
						// let mpId = plus.runtime.appid
						// url = 'eper://weichat.xar.com/tochat?mobile=' + this.order.mobile+'&mpId='+mpId;
						// plus.runtime.openURL(url, res => {
						// 	console.log(res);
						// });
						let token = uni.getStorageSync('token') 
						let goUrl = `${urls}/#/pages/login/login?mobile=${this.order.mobile}&serviceType=集市&token=${token}` 
						 uni.setStorageSync('openWebViewUrl',goUrl)
						let url = `../webView/webView?type=serve`  
						uni.navigateTo({
							url:url
						})
					} else {
						this.$common.msg("请刷新页面重试");
					}
				}else{
					this.$refs['serveGoods'].show() 
				} 
			}
		}
	}
</script>

<style lang="less" scoped>
	@import './index.less';
</style>
